<template>
  <div :style="mapStyle" :id="uuid"></div>
</template>
<script>
/* eslint-disable no-undef */
export default {
  props: {
    value: Object,
    mapHeight: {
      type: Number,
      default: 100
    },
    level: {
      type: Number,
      default: 16
    },
    mode: {
      type: String,
      default: "location"
    }
  },
  created() {
    this.point = new qq.maps.LatLng(this.value.lat, this.value.lng);
  },
  mounted: function() {
    this.uuid = `vux-tmap-${Math.random()
      .toString(36)
      .substring(3, 8)}`;

    this.$nextTick(function() {
      this.map = new qq.maps.Map(document.getElementById(this.uuid), {
        center: this.point,
        zoom: this.level
      });
      this.geocoder = new qq.maps.Geocoder({
        complete: result => {
          this.map.setCenter(result.detail.location);
        }
      });
      this.marker = new qq.maps.Marker({
        position: this.point,
        map: this.map
      });
      qq.maps.event.addListener(this.map, "click", event => {
        if (this.marker) this.marker.setMap(null);
        this.marker = new qq.maps.Marker({
          position: event.latLng,
          map: this.map
        });
        this.point = event.latLng;
      });
      this.$watch("point", val => {
        this.$emit("input", val);
      });
    });
  },
  data() {
    return {
      uuid: "",
      point: {},
      mapStyle: {
        width: "100%",
        height: this.mapHeight + "px",
        borderRadius: "5px"
      }
    };
  },
  methods: {
    areaChanged(area) {
      this.geocoder.getLocation(area);
    }
  }
};
</script>
<style scoped>
</style>
